<script setup lang="ts">
import { reactive, onMounted, onUnmounted } from 'vue';

let vick2dMapNextTick;
let vick2dMapIframe;
let abortController;

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));

import { getKeyValue, randomString } from '../format-map-data.js';

const props = defineProps({
  classSelf: {
    type: Object
  },
  setRef: {
    type: Function
  },
  earth2dConfig: {
    type: Object,
    default: {}
  }
});

let self = {};
self.state = reactive({});
self.setState = (object = {}) => {
  const keys = Object.keys(object);
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    self.state[key] = object[key];
  }
  return true;
};
self.setState({
  isFullScreen: false
});

self.vick2dMapPostMessage = async (object) => {
  if (vick2dMapNextTick == true) {
    if (object != null && object.from != null && object.type != null && object.key != null) {
      const secretKey = randomString(16);
      object.secretKey = secretKey;
      vick2dMapIframe.contentWindow.postMessage(object, '*');
      return new Promise((resolve) => {
        window.addEventListener('message', function callbackMessage(event) {
          const result = event.data;
          if (result.secretKey === secretKey) {
            resolve(result.value);
            this.removeEventListener('message', callbackMessage);
          }
        });
      });
    } else {
      return false;
    }
  } else {
    await sleep(40);
    return await self.vick2dMapPostMessage(object);
  }
};

self.vick2dMapAddEventListener = async (event) => {
  const object = event.data;
  if (object.from == 'vick2dMap') {
    // 收到组件加载完成消息 拿到 dom 的 contentWindow 完成后 vick2dMapNextTick 变更 所以只执行一次
    if (vick2dMapNextTick == false && object.type == 'begin') {
      vick2dMapNextTick = true;
    }
    // 消息处理
    if (object.type == 'getKeyValue') {
      await getKeyValue(object, props.classSelf, 'vick2dMap');
    }
  }
};

self.setEarthConfig = async ({ earth2dConfig = {} } = {}) => {
  const keys2d = Object.keys(earth2dConfig);
  let count = 0;
  let returnValue = null;
  const length2d = keys2d.length;
  async function isListThen() {
    if (count - length2d >= 0) {
      return returnValue;
    } else {
      await sleep(40);
      return await isListThen();
    }
  }
  for (let i = 0; i < length2d; i++) {
    const key2d = keys2d[i];
    const promise = self.vick2dMapPostMessage({
      from: 'vick2dMapFather',
      type: 'setEarth2dConfig',
      key: key2d,
      value: earth2dConfig[key2d]
    });
    promise.then((value) => {
      returnValue = value;
      count++;
    });
  }
  return await isListThen();
};

props.setRef(self);

onMounted(async () => {
  // export default 外变量 会受其他组件影响，默认值不在 export default 赋值
  vick2dMapNextTick = false;
  vick2dMapIframe = document.getElementById('integration-2d');
  abortController = new AbortController();
  const { signal } = abortController;
  window.addEventListener('message', self.vick2dMapAddEventListener, { signal });

  await self.setEarthConfig({ earth2dConfig: props.earth2dConfig });

  // 渲染地图
  self.vick2dMapPostMessage({
    from: 'vick2dMapFather',
    type: 'function',
    key: 'nextTick2dMap',
    value: {
      coordinatesSystem: props.classSelf.state.coordinatesSystem || 'cgcs2000'
    }
  });
});

onUnmounted(() => {
  if (abortController != null) {
    abortController.abort();
  }
});
</script>

<template>
  <div class="pick-integration">
    <iframe
      src="./vick-2d-map-sdk/index.html"
      id="integration-2d"
      :class="[self.state.isFullScreen ? 'full-screen-2d' : 'pick-2d']"
    ></iframe>
    <div
      @click="
        self.setState({
          isFullScreen: true
        })
      "
      v-show="!self.state.isFullScreen"
      class="full-screen-absolute"
    >
      <svg
        t="1711939366989"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5531"
        id="mx_n_1711939366989"
        width="24"
        height="24"
      >
        <path
          d="M64 165.632 64 416C64 433.664 78.336 448 96 448S128 433.664 128 416L128 235.328l203.456 203.52c11.968 11.968 31.36 11.968 43.392 0 11.968-12.032 11.968-31.424 0-43.392L171.328 192 352 192C369.664 192 384 177.664 384 160S369.664 128 352 128L101.632 128C78.272 128 64 140.032 64 165.632z"
          p-id="5532"
          fill="#ff7c3e"
        ></path>
        <path
          d="M860.352 128 609.984 128c-17.664 0-32 14.336-32 32S592.32 192 609.984 192l180.672 0-203.52 203.456c-11.968 11.968-11.968 31.36 0 43.392 12.032 11.968 31.424 11.968 43.392 0l203.456-203.52L833.984 416c0 17.664 14.336 32 32 32s32-14.336 32-32L897.984 165.632C897.984 140.032 883.776 128 860.352 128z"
          p-id="5533"
          fill="#ff7c3e"
        ></path>
        <path
          d="M101.632 960 352 960C369.664 960 384 945.664 384 928S369.664 896 352 896L171.328 896l203.52-203.456c11.968-11.968 11.968-31.36 0-43.392-12.032-11.968-31.424-11.968-43.392 0L128 852.672 128 672C128 654.336 113.664 640 96 640S64 654.336 64 672l0 250.368C64 947.968 78.272 960 101.632 960z"
          p-id="5534"
          fill="#ff7c3e"
        ></path>
        <path
          d="M897.984 922.368 897.984 672c0-17.664-14.336-32-32-32s-32 14.336-32 32l0 180.672-203.456-203.52c-11.968-11.968-31.36-11.968-43.392 0-11.968 12.032-11.968 31.424 0 43.392L790.656 896 609.984 896c-17.664 0-32 14.336-32 32s14.336 32 32 32l250.368 0C883.776 960 897.984 947.968 897.984 922.368z"
          p-id="5535"
          fill="#ff7c3e"
        ></path>
      </svg>
    </div>
    <div
      @click="
        self.setState({
          isFullScreen: false
        })
      "
      v-show="self.state.isFullScreen"
      class="full-screen-fixed"
    >
      <svg
        t="1711939387786"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5705"
        width="24"
        height="24"
      >
        <path
          d="M576 677.632 576 928C576 945.664 590.336 960 608 960s32-14.336 32-32l0-180.672 203.456 203.52c11.968 11.968 31.36 11.968 43.392 0 11.968-12.032 11.968-31.424 0-43.392L683.328 704 864 704c17.664 0 32-14.336 32-32S881.664 640 864 640L613.632 640C590.272 640 576 652.032 576 677.632z"
          p-id="5706"
          fill="#ff7c3e"
        ></path>
        <path
          d="M348.352 640 97.984 640c-17.664 0-32 14.336-32 32s14.336 32 32 32l180.672 0-203.52 203.456c-11.968 11.968-11.968 31.36 0 43.392 12.032 11.968 31.424 11.968 43.392 0l203.456-203.52L321.984 928c0 17.664 14.336 32 32 32s32-14.336 32-32l0-250.368C385.984 652.032 371.776 640 348.352 640z"
          p-id="5707"
          fill="#ff7c3e"
        ></path>
        <path
          d="M613.632 448 864 448C881.664 448 896 433.664 896 416S881.664 384 864 384l-180.672 0 203.52-203.456c11.968-11.968 11.968-31.36 0-43.392-12.032-11.968-31.424-11.968-43.392 0L640 340.672 640 160C640 142.336 625.664 128 608 128S576 142.336 576 160l0 250.368C576 435.968 590.272 448 613.632 448z"
          p-id="5708"
          fill="#ff7c3e"
        ></path>
        <path
          d="M385.984 410.368 385.984 160c0-17.664-14.336-32-32-32s-32 14.336-32 32l0 180.672-203.456-203.52c-11.968-11.968-31.36-11.968-43.392 0-11.968 12.032-11.968 31.424 0 43.392L278.656 384 97.984 384c-17.664 0-32 14.336-32 32S80.32 448 97.984 448l250.368 0C371.776 448 385.984 435.968 385.984 410.368z"
          p-id="5709"
          fill="#ff7c3e"
        ></path>
      </svg>
    </div>
  </div>
</template>

<style src="./components.css" scoped></style>
